import { create } from "zustand"
import { createJSONStorage, persist } from "zustand/middleware"

import type { UIContentState } from "~type/UIcontent"
import type { UIContentAction } from "~type/UIContentAction"
import { StoreageKEY } from "~util/const"
import { storage } from "~util/sotrage"

export const useUIcontentStore = create<UIContentState & UIContentAction>()(
  persist(
    (set, get) => ({
      showUI: false,
      width: 800,
      height: 600,
      x: 0,
      y: 0,
      createTime: new Date().getTime().toString(),
      setContentUI: (data: UIContentState) => {
        set({ ...data, createTime: new Date().getTime().toString() })
      },
      setShowUI: (show: boolean) => {
        set({ showUI: show })
      }
    }),
    {
      name: StoreageKEY.uiConfig,
      storage: createJSONStorage(() => storage)
    }
  )
)
